<template>
  <div class="rovrew">
    <div class="recommendList_container">
      <div class="recommend_topp">
        <ul>
          <li>
            <div class="img">
              <!-- <img :src="item.pic" alt="" width="100%" height="340px" /> -->
              <van-swipe
                class="my-swipe"
                :autoplay="3000"
                indicator-color="white"
                height="340"
              >
                <van-swipe-item
                  v-for="(item, index) in list.pics2"
                  :key="index"
                >
                  <img :src="item" alt="" width="100%" height="340px" />
                </van-swipe-item>
              </van-swipe>
            </div>
            <p>{{ list.basicInfo.name }}</p>
            <span>{{ list.basicInfo.recommendStatusStr }}</span>
            <div class="remove">
              <span class="pp">低价￥{{ list.basicInfo.minPrice }}</span>
              <span class="remove_oo"
                >原价￥{{ list.basicInfo.originalPrice }}</span
              >
              <span class="remove_kc">库存{{ list.basicInfo.stores }}</span>
            </div>
          </li>
        </ul>
      </div>
      <Seaver />
    </div>
    <div class="buttom">
      <!-- 底部 -->
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="show = true"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
    <!-- 弹出层 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <div
        class="show_container"
        v-for="(item, index) in list.pics2.slice(0, 1)"
        :key="index"
      >
        <div class="show_imgs">
          <img :src="item" alt="" />
        </div>

        <div class="show_div">
          <p>{{ list.basicInfo.name }}</p>
          <span class="pp">低价￥{{ list.basicInfo.minPrice }}</span>
        </div>
      </div>
      <div class="show_geige">
        <div v-for="(item, index) in list.properties" :key="index">
          <div>{{ list.basicInfo.name }}</div>
          <div>
            <div v-for="(itex, index) in item.childsCurGoods" :key="index">
              {{ itex.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="show_bujinqi">
        数量
        <van-stepper v-model="value" />
      </div>
      <div class="jia">
        <button @click="show_x()">加入购物车</button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import Seaver from "../../components/pluginunit/removeSeaver";
import mixin from "../../store/index";
export default {
  mixins: [mixin],
  components: {
    Seaver,
  },

  data() {
    return {
      list: [],
      coplist: [],
      value: "",
      show: false,
    };
  },
  mounted() {
    console.log(this.$route.query.id);
    this.$API
      .comdet(this.$route.query.id)
      .then((res) => {
        this.list = res.data.data;
        this.coplist = res.data.data.basicInfo;
        console.log(this.coplist);
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    show_x() {
      this.show = false;

      // this.$store.dispatch("GET_CART", item);
      if (!localStorage.getItem("token")) {
        this.$router.push("/login");

        // alert("请登录");
      } else {
        // this.$router.push({path:"/ShopCart",query:{coplist}})
        this.ShoppingCart_add(this.list)
        
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.rovrew {
  width: 100%;
  background-color: gainsboro;
}
.recommendList_container {
  width: 100%;
  background-color: gainsboro;
}
.recommend_topp {
  width: 100%;
  height: 9rem;
  background-color: white;
}
.recommend_topp > ul {
  width: 100%;
  height: 100%;

  box-sizing: border-box;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.recommend_topp > ul > li {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  /* border: 1px saddlebrown solid; */
}
.recommend_topp > ul > li > p {
  font-size: 0.3rem;
  margin: 5px 0 8px 0;
}
.recommend_toppe > ul > li > span {
  color: gray;
}
.remove {
  margin-top: 6px;
}
.pp {
  margin-top: 6px;
  color: red;
}
.remove_oo {
  color: gray;
  margin-left: 5px;
}
.remove_kc {
  margin-left: 180px;
  color: gray;
}
.buttom {
  width: 100%;
  height: 1.2rem;
  position: fixed;
  bottom: 0;
  left: 0;
}
.show_container {
  width: 100%;
  height: 2rem;
  // background-color: yellow;
  border-bottom: 1px solid gray;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  .show_imgs {
    width: 30%;
    height: 100%;
    text-align: center;
    line-height: 2rem;
    img {
      width: 100%;
      height: 90%;
    }
  }
  .show_div {
    width: 70%;
    height: 100%;
  }
}
.show_geige {
  width: 100%;
  height: 2rem;
  border-bottom: 1px solid gray;
  box-sizing: border-box;
  padding: 0.2rem;
  > div {
    > div {
      &:nth-child(1) {
        margin-bottom: 0.2rem;
      }
      &:nth-child(2) {
        width: 100%;
        display: flex;
        > div {
          padding: 0.1rem 0.2rem;
          margin: 0rem 0.2rem;
          border: 1px solid #aaa;
          border-radius: 0.2rem;
        }
      }
    }
  }
}
.show_bujinqi {
  width: 100%;
  height: 1rem;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
.jia {
  width: 100%;
  height: 1rem;
  button {
    width: 100%;
    height: 1rem;
    border: none;
    outline: none;
    background-color: red;
    text-align: center;
    line-height: 1rem;
    font-size: 0.3rem;
    color: white;
  }
}
</style>